<template>
    <view class="home-container" :class="{ 'mobile': isMobile }">
        <!-- 顶部状态栏 -->
        <view class="status-bar fade-in">
            <view class="status-left">
                <view class="user-avatar" @click="goToAvatarEditor">
                    <image :src="getAvatarUrl(userInfo.avatar)" class="avatar" />
                    <view class="online-indicator"></view>
                </view>
                <view class="user-status">
                    <text class="username">{{ userInfo.name || '访客' }}</text>
                    <view class="user-meta">
                        <text class="level">Lv.{{ userInfo.level || 1 }}</text>
                        <text class="points">{{ userInfo.points || 0 }} 积分</text>
                    </view>
                </view>
            </view>
            <view class="status-right">
                <button v-if="userInfo.role === 'admin'" @click="goToAdmin" class="icon-btn admin-btn">
                    <i class="fa fa-crown"></i>
                </button>
                <button @click="goToSettings" class="icon-btn settings-btn">
                    <i class="fa fa-cog"></i>
                </button>
            </view>
        </view>

        <!-- 快捷操作区 -->
        <view class="quick-actions fade-in-delay-1">
            <view class="action-grid">
                <button class="action-item" @click="goToSpace">
                    <view class="action-icon space-icon">
                        <i class="fa fa-rocket"></i>
                    </view>
                    <text class="action-label">我的空间</text>
                </button>
                <button class="action-item" @click="dailyCheckIn">
                    <view class="action-icon checkin-icon">
                        <i class="fa fa-calendar-check"></i>
                    </view>
                    <text class="action-label">每日签到</text>
                </button>
                <button class="action-item" @click="goToGames">
                    <view class="action-icon games-icon">
                        <i class="fa fa-gamepad"></i>
                    </view>
                    <text class="action-label">游戏中心</text>
                </button>
                <button class="action-item" @click="goToFriends">
                    <view class="action-icon friends-icon">
                        <i class="fa fa-users"></i>
                    </view>
                    <text class="action-label">好友</text>
                </button>
            </view>
        </view>

        <!-- 公告栏 -->
        <view v-if="latestNotice" class="notice-card fade-in-delay-2" :class="{ 'collapsed': noticeCollapsed }">
            <view class="notice-header" @click="toggleNotice">
                <view class="notice-left">
                    <i class="fa fa-bullhorn notice-icon"></i>
                    <text class="notice-title">{{ latestNotice.title }}</text>
                    <view v-if="noticeCollapsed" class="notice-preview">
                        <text class="notice-preview-text">{{ latestNotice.content.substring(0, 30) }}{{ latestNotice.content.length > 30 ? '...' : '' }}</text>
                    </view>
                </view>
                <view class="notice-actions">
                    <button class="notice-toggle" @click.stop="toggleNotice">
                        <i class="fa" :class="noticeCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
                    </button>
                    <button class="notice-close" @click.stop="closeNotice">
                        <i class="fa fa-times"></i>
                    </button>
                </view>
            </view>
            <view v-if="!noticeCollapsed" class="notice-content-wrapper">
                <text class="notice-content">{{ latestNotice.content }}</text>
            </view>
        </view>

        <!-- 动态内容区 -->
        <view class="content-section">
            <view class="section-header">
                <view class="section-title-group">
                    <text class="section-title">最新动态</text>
                    <text class="section-subtitle">{{ recentPosts.length }} 条动态</text>
                </view>
                <button class="refresh-btn" @click="onRefresh" :class="{ 'refreshing': isRefreshing }">
                    <i class="fa fa-sync-alt"></i>
                </button>
            </view>

            <scroll-view
                class="posts-container"
                scroll-y
                refresher-enabled
                :refresher-triggered="isRefreshing"
                @refresherrefresh="onRefresh"
            >
                <view class="posts-list">
                    <view v-if="recentPosts.length === 0" class="empty-state">
                        <view class="empty-icon">
                            <i class="fa fa-comments"></i>
                        </view>
                        <text class="empty-title">还没有动态</text>
                        <text class="empty-subtitle">快来发布第一条动态吧！</text>
                        <button class="empty-action-btn" @click="showPostModal">
                            <i class="fa fa-plus"></i>
                            <text>发布动态</text>
                        </button>
                    </view>
                    <view v-else v-for="post in recentPosts" :key="post.id" class="post-card">
                        <view class="post-header">
                            <view class="post-author">
                                <image :src="getAvatarUrl(post.userAvatar)" class="author-avatar" />
                                <view class="author-info">
                                    <text class="author-name">{{ post.userName }}</text>
                                    <text class="post-time">{{ formatTime(post.created_at) }}</text>
                                </view>
                            </view>
                            <view class="post-actions">
                                <button class="post-action-btn" @tap="likePost(post.id)">
                                    <i class="fa" :class="post.isLiked ? 'fas fa-heart liked' : 'far fa-heart'"></i>
                                    <text class="action-count">{{ post.likes || 0 }}</text>
                                </button>
                                <button class="post-action-btn" @tap="showCommentInput(post.id)">
                                    <i class="far fa-comment"></i>
                                    <text class="action-count">{{ post.comments?.length || 0 }}</text>
                                </button>
                            </view>
                        </view>
                        <view class="post-content">
                            <text class="post-text">{{ post.content }}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 浮动发布按钮 -->
        <view class="floating-post-btn" @click="showPostModal">
            <i class="fa fa-plus"></i>
        </view>

        <!-- 发布动态弹窗 -->
        <view v-if="showPostModalFlag" class="modal-overlay" @click="hidePostModal">
            <view class="post-modal" @click.stop>
                <view class="modal-header">
                    <view class="modal-header-left">
                        <image :src="getAvatarUrl(userInfo.avatar)" class="modal-avatar" />
                        <view class="modal-user-info">
                            <text class="modal-user-name">{{ userInfo.name || '访客' }}</text>
                            <text class="modal-user-status">发布动态</text>
                        </view>
                    </view>
                    <button class="modal-close" @tap="hidePostModal">
                        <i class="fa fa-times"></i>
                    </button>
                </view>
                <view class="modal-body">
                    <textarea 
                        v-model="newPost.content"
                        class="post-textarea"
                        placeholder="分享你的想法..."
                        maxlength="500"
                        auto-height
                    ></textarea>
                    <view class="modal-tools">
                        <button class="tool-btn">
                            <i class="fa fa-image"></i>
                        </button>
                        <button class="tool-btn">
                            <i class="fa fa-video"></i>
                        </button>
                        <button class="tool-btn">
                            <i class="fa fa-smile"></i>
                        </button>
                        <button class="tool-btn">
                            <i class="fa fa-at"></i>
                        </button>
                    </view>
                    <view class="modal-footer">
                        <text class="char-count" :class="{ 'warning': newPost.content.length > 450 }">{{ newPost.content.length }}/500</text>
                        <view class="modal-actions">
                            <button class="modal-btn cancel" @tap="hidePostModal">取消</button>
                            <button 
                                class="modal-btn submit" 
                                @tap="submitPost" 
                                :disabled="isSubmitting || !newPost.content.trim()"
                            >
                                <i v-if="isSubmitting" class="fa fa-spinner fa-spin"></i>
                                <text>{{ isSubmitting ? '发布中...' : '发布' }}</text>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 回到顶部按钮 -->
        <view v-if="showBackToTop" class="back-to-top" @click="backToTop">
            <i class="fa fa-arrow-up"></i>
        </view>
    </view>
</template>

<script>
import { createPost, getRecentPosts, likePost, getAllPosts } from '@/api/post'
import { addPointsForPost, dailyCheckIn } from '@/api/points'
import { getLatestNotice } from '@/api/notice'
import { getUserInfo } from '@/api/user'
import { generateAvatarSvg } from '@/utils/avatar'
import { useUserStore } from '@/stores/user'
import { formatTime } from '../../utils/date-utils';
import { checkLoginStatus, getCurrentUserInfo, getCurrentUserId, validateBeforeOperation, updateUserPoints } from '@/utils/auth'


export default {
    data() {
        return {
            userInfo: {
                name: '',
                level: 1,
                role: 'user',
                avatar: null
            },
            recentPosts: [],
            newPost: {
                content: ''
            },
            notice: '',
            isSubmitting: false,
            ctx: null,
            isLoading: false,
            checkLoginRetries: 0,
            isMobile: false,
            entryCtx: null,
            latestNotice: null,
            showBackToTop: false,
            isRefreshing: false, // 新增：控制下拉刷新的状态
                         showPostModalFlag: false, // 控制发布动态模态框
             noticeCollapsed: true // 新增：控制公告栏折叠状态，默认折叠
        }
    },
    onLoad() {
        console.log('Home page onLoad')
        const userStore = useUserStore();
        console.log('Home page onLoad, userStore:', userStore);
        console.log('Home page onLoad, userId:', userStore.userId);
        console.log('Home page onLoad, token:', userStore.token);
        console.log('Home page onLoad, isLogin:', userStore.isLogin);
        
        const systemInfo = uni.getSystemInfoSync();
        this.isMobile = systemInfo.windowWidth < 768;
        // 同时检查设备类型，提供更准确的适配
        this.isTablet = systemInfo.windowWidth >= 768 && systemInfo.windowWidth < 1024;
                 // 读取用户公告栏偏好设置
         const savedCollapsed = uni.getStorageSync('noticeCollapsed');
         if (savedCollapsed !== null) {
             this.noticeCollapsed = savedCollapsed;
         }
         
         this.initializeHome()
    },
    onShow() {
        console.log('Home page onShow')
        if (this.userInfo.name) {
            // 刷新用户信息和动态列表，确保积分等数据是最新的
            Promise.all([
                this.fetchUserInfo(),
                this.fetchRecentPosts()
            ]).catch(error => {
                console.error('Home onShow 刷新失败:', error)
            })
        }
    },
    onPageScroll(e) {
        this.showBackToTop = e.scrollTop > 200;
    },
    methods: {
        // 导航到个人资料页面
        goToProfile() {
            uni.navigateTo({
                url: '/pages/profile/profile'
            });
        },
        
        // 导航到头像编辑器
        goToAvatarEditor() {
            uni.navigateTo({
                url: '/pages/avatar/avatar'
            });
        },
        
        // 导航到管理页面
        goToAdmin() {
            uni.navigateTo({
                url: '/pages/admin/admin'
            });
        },
        
        // 导航到空间页面
        goToSpace() {
            uni.navigateTo({
                url: '/pages/space/space'
            });
        },
        
        // 处理登出
        handleLogout() {
            uni.showModal({
                title: '确认登出',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        const userStore = useUserStore();
                        userStore.logout();
                        uni.reLaunch({
                            url: '/pages/login/login'
                        });
                    }
                }
            });
        },
        
        showPostModal() {
            this.showPostModalFlag = true;
        },
        hidePostModal() {
            this.showPostModalFlag = false;
            this.newPost.content = '';
        },
        getAvatarUrl(config) {
            return generateAvatarSvg(config);
        },
        async initializeHome() {
            try {
                const isLoggedIn = checkLoginStatus(true)
                if (isLoggedIn) {
                    await Promise.all([
                        this.fetchUserInfo(),
                        this.fetchRecentPosts(),
                        this.fetchLatestNotice()
                    ])
                }
            } catch (error) {
                console.error('Home initialization failed:', error)
            }
        },
        
        async fetchUserInfo() {
            try {
                const userId = getCurrentUserId(false); // 不强制跳转登录
                if (!userId) {
                    console.log('Home页面 - 未找到用户ID，显示访客状态');
                    this.userInfo = {
                        name: '访客',
                        level: 1,
                        role: 'user',
                        avatar: null,
                        points: 0
                    };
                    return;
                }
                
                // 直接从后端API获取最新的用户信息
                const data = await getUserInfo(userId);
                console.log('Home页面 - API返回的用户数据:', data);
                
                // 修复字段名映射
                this.userInfo = {
                    name: data.name || data.userName || data.username || '访客',
                    level: data.level || 1,
                    role: data.role || 'user',
                    avatar: data.avatar,
                    points: data.points || 0
                };
                
                console.log('Home页面 - 获取用户信息成功:', this.userInfo);
                
                // 更新用户信息到统一存储
                const userStore = useUserStore();
                userStore.setUserInfo({
                    userId: userId,
                    userName: this.userInfo.name,
                    email: data.email || '',
                    level: this.userInfo.level,
                    points: this.userInfo.points,
                    role: this.userInfo.role,
                    avatar: this.userInfo.avatar,
                    token: userStore.token // 保持原有token
                });
                
                console.log('Home页面 - 已更新Pinia store');
            } catch (error) {
                console.error('Home页面 - 获取用户信息失败:', error)
                // 如果获取失败，显示访客状态
                this.userInfo = {
                    name: '访客',
                    level: 1,
                    role: 'user',
                    avatar: null,
                    points: 0
                };
            }
        },

        // 获取最近动态
        async fetchRecentPosts() {
            uni.showLoading({
                title: '加载中...'
            });
            
            try {
                // 获取用户ID用于点赞状态检查
                const userId = getCurrentUserId(false) // 不强制跳转登录
                
                // 使用getAllPosts接口获取包含点赞状态的动态列表
                const posts = await getAllPosts({ 
                    page: 1, 
                    pageSize: 10, 
                    userId: userId || 0 
                });
                
                if (Array.isArray(posts)) {
                    // 双重保险：即使后端返回顺序有误，前端再次排序
                    posts.sort((a, b) => new Date(b.created_at || b.CreatedAt) - new Date(a.created_at || a.CreatedAt));
                    
                    this.recentPosts = posts.map(post => ({
                        ...post,
                        isLiked: post.is_liked || false, // 使用后端返回的点赞状态
                        userName: post.user ? post.user.name : '未知用户',
                        userAvatar: post.user ? post.user.avatar : null
                    }));

                    // 绘制所有动态的头像
                    this.$nextTick(() => {
                    });
                } else {
                    this.recentPosts = [];
                }
            } catch (error) {
                console.error('获取最近动态失败:', error)
                uni.showToast({
                    title: '获取动态失败',
                    icon: 'none'
                })
            } finally {
                uni.hideLoading();
            }
        },

        // 下拉刷新处理
        async handleRefresh() {
            try {
                // 并行获取用户信息和最新动态，提高刷新速度
                await Promise.all([this.fetchUserInfo(), this.fetchRecentPosts()]);
                uni.showToast({
                    title: '刷新成功',
                    icon: 'success'
                });
            } catch (error) {
                console.error('刷新失败:', error);
                uni.showToast({
                    title: '刷新失败，请稍后再试',
                    icon: 'error'
                });
            } finally {
                // 无论成功或失败，都停止下拉刷新动画
                uni.stopPullDownRefresh();
            }
        },

        // 关闭公告
        closeNotice() {
            this.latestNotice = null
        },

                 // 切换公告栏折叠状态
         toggleNotice() {
             this.noticeCollapsed = !this.noticeCollapsed;
             // 记住用户偏好
             uni.setStorageSync('noticeCollapsed', this.noticeCollapsed);
         },

        // 每日签到
        async dailyCheckIn() {
            // 使用统一的登录验证
            const isLoggedIn = validateBeforeOperation('每日签到')
            
            if (!isLoggedIn) {
                return;
            }
            
            try {
                const res = await dailyCheckIn();
                if (res.success) {
                    uni.showToast({ title: '签到成功', icon: 'success' });
                    // 更新用户积分 - 同步到全局状态
                    updateUserPoints(res.data.total_points);
                    this.userInfo.points = res.data.total_points;
                } else {
                    uni.showToast({ title: res.message || '签到失败', icon: 'none' });
                }
            } catch (error) {
                console.error('签到失败:', error);
                uni.showToast({ title: '签到失败', icon: 'error' });
            }
        },

        // 导航到游戏中心
        goToGames() {
            uni.switchTab({
                url: '/pages/games/index'
            });
        },

        // 导航到好友页面
        goToFriends() {
            uni.navigateTo({
                url: '/pages/friends/friends'
            });
        },

        // 导航到设置页面
        goToSettings() {
            uni.navigateTo({
                url: '/pages/settings/settings'
            });
        },

        // 提交动态
        async submitPost() {
            if (!this.newPost.content.trim()) {
                uni.showToast({
                    title: '内容不能为空',
                    icon: 'none'
                });
                return;
            }
            
            // 使用统一的登录验证
            const isLoggedIn = validateBeforeOperation('发布动态')
            
            if (!isLoggedIn) {
                return;
            }
            
            this.isSubmitting = true;
            try {
                await createPost({
                    content: this.newPost.content
                });
                
                // 添加积分奖励
                try {
                    await addPointsForPost();
                    console.log('积分奖励添加成功');
                } catch (pointsError) {
                    console.error('积分奖励添加失败:', pointsError);
                }
                
                this.hidePostModal();
                uni.showToast({
                    title: '发布成功！',
                    icon: 'success'
                });
                await this.fetchRecentPosts();
            } catch (error) {
                console.error("发布动态失败:", error);
                uni.showToast({
                    title: '发布失败',
                    icon: 'error'
                });
            } finally {
                this.isSubmitting = false;
            }
        },

        // 格式化时间
        formatTime(dateString) {
            if (!dateString) return '未知时间';
            
            // 处理ISO 8601带时区格式
            let adjustedDateString = dateString;
            
            // 修复毫秒部分 (确保三位数)
            adjustedDateString = adjustedDateString.replace(/(\.\d{1,2})(?=[+-])/, (match) => {
                return match.padEnd(4, '0'); // .64 → .640, .6 → .600
            });
            
            // 修复时区格式 (例如将+08:00转换为+0800)
            adjustedDateString = adjustedDateString.replace(/([+-]\d{2}):(\d{2})$/, '$1$2');
            
            // 尝试多种解析方式
            let date = new Date(adjustedDateString);
            if (isNaN(date.getTime())) {
                date = new Date(adjustedDateString.replace('T', ' '));
            }
            if (isNaN(date.getTime())) {
                date = new Date(dateString);
            }
            
            if (isNaN(date.getTime())) {
                console.error('Failed to parse date:', dateString);
                return `无效时间: ${dateString.substring(0, 16)}`;
            }
            
            const now = new Date();
            const diffMs = now - date;
            const diffSecs = Math.floor(diffMs / 1000);
            const diffMins = Math.floor(diffSecs / 60);
            const diffHours = Math.floor(diffMins / 60);
            const diffDays = Math.floor(diffHours / 24);
            
            if (diffSecs < 60) return '刚刚';
            if (diffMins < 60) return `${diffMins}分钟前`;
            if (diffHours < 24) return `${diffHours}小时前`;
            if (diffDays < 30) return `${diffDays}天前`;
            
            // 格式化日期为 年/月/日 时:分
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            const hours = ('0' + date.getHours()).slice(-2);
            const minutes = ('0' + date.getMinutes()).slice(-2);
            
            const formatted = `${year}/${month}/${day} ${hours}:${minutes}`;
            return formatted;
        },

        // 点赞动态
        async likePost(postId) {
            if (!postId) return
            try {
                await likePost(postId)
                // 更新本地状态
                const post = this.recentPosts.find(p => p.id === postId)
                if (post) {
                    post.isLiked = !post.isLiked
                    post.likes = (post.likes || 0) + (post.isLiked ? 1 : -1)
                }
                uni.showToast({
                    title: post.isLiked ? '点赞成功' : '取消点赞',
                    icon: 'success'
                })
            } catch (error) {
                console.error('点赞失败:', error)
                uni.showToast({
                    title: error.message || '点赞失败',
                    icon: 'none'
                })
            }
        },

        // 显示评论输入框
        showCommentInput(postId) {
            uni.showToast({
                title: '评论功能开发中',
                icon: 'none'
            })
        },


        // 导航方法
        navigateToSquare() {
            uni.switchTab({
                url: '/pages/square/square'
            })
        },
        navigateToAdmin() {
            uni.navigateTo({
                url: '/pages/admin/admin'
            });
        },
        goToAvatarEditor() {
            uni.navigateTo({
                url: '/pages/avatar/avatar'
            });
        },
        goToSpace() {
            uni.navigateTo({
                url: '/pages/space/space'
            });
        },

        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        console.log('执行退出登录')
                        // 使用统一的清除登录信息方法
                        const { clearLoginInfo } = require('@/utils/auth')
                        clearLoginInfo()
                        uni.reLaunch({
                            url: '/pages/login/login'
                        })
                    }
                }
            })
        },

        goToAdmin() {
            uni.navigateTo({
                url: '/pages/admin/admin'
            });
        },

                 // 获取最新公告
         async fetchLatestNotice() {
             try {
                 const res = await getLatestNotice();
                 console.log('公告API返回数据:', res);
                 // 检查是否有有效的公告数据
                 if (res && res.title) {
                     // 检查是否是新公告（通过比较标题或内容）
                     const isNewNotice = !this.latestNotice || 
                                        this.latestNotice.title !== res.title ||
                                        this.latestNotice.content !== res.content;
                     
                     this.latestNotice = res;
                     
                     // 如果是新公告，自动展开
                     if (isNewNotice) {
                         this.noticeCollapsed = false;
                         uni.setStorageSync('noticeCollapsed', false);
                     }
                 } else {
                     // 没有标题时显示默认公告
                     this.latestNotice = {
                         title: '暂无公告',
                         content: '当前没有最新公告信息'
                     };
                 }
             } catch (error) {
                 console.error("获取最新公告失败:", error);
                 // 显示错误提示
                 uni.showToast({
                     title: '公告加载失败',
                     icon: 'error'
                 });
                 // 错误时显示默认公告
                 this.latestNotice = {
                     title: '公告加载失败',
                     content: '请稍后重试或联系管理员'
                 };
             }
         },

        // 回到顶部
        backToTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300
            });
        },

        // 新增：下拉刷新处理函数
        async onRefresh() {
            this.isRefreshing = true;
            try {
                // 并行获取用户信息和最新动态，提高刷新速度
                await Promise.all([this.fetchUserInfo(), this.fetchRecentPosts()]);
                uni.showToast({
                    title: '刷新成功',
                    icon: 'success'
                });
            } catch (error) {
                console.error('下拉刷新失败:', error);
                uni.showToast({
                    title: '刷新失败，请稍后再试',
                    icon: 'error'
                });
            } finally {
                this.isRefreshing = false;
            }
        }
    }
}
</script>

<style scoped src="./home.css"></style>
  <style scoped>
    .large-create-post-entry {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background-color: var(--card-bg-color);
        border-radius: 16px;
        margin-bottom: 20px;
        box-shadow: var(--card-shadow);
        text-align: center;
    }

    .large-entry-content {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .large-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 15px;
        border: 2px solid var(--primary-color);
    }

    .large-entry-text {
        font-size: 18px;
        color: var(--text-color);
    }

    .large-placeholder {
        font-weight: 500;
        color: var(--text-secondary-color);
    }

    .large-entry-button {
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 30px;
        padding: 12px 24px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: var(--transition);
    }

         .large-entry-button:hover {
         background-color: var(--primary-dark-color);
         transform: translateY(-2px);
     }

     /* 模态框样式 */
     .modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 1000;
     }

     .post-modal {
         background: white;
         border-radius: 12px;
         padding: 20px;
         width: 90%;
         max-width: 500px;
         max-height: 80vh;
         overflow-y: auto;
     }

     .modal-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 15px;
     }

     .modal-title {
         font-size: 18px;
         font-weight: bold;
         color: #333;
     }

     .close-btn {
         background: none;
         border: none;
         font-size: 20px;
         color: #666;
         cursor: pointer;
     }

     .post-textarea {
         width: 100%;
         min-height: 120px;
         border: 1px solid #ddd;
         border-radius: 8px;
         padding: 12px;
         font-size: 14px;
         resize: vertical;
         margin-bottom: 15px;
     }

     .modal-footer {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .char-count {
         font-size: 12px;
         color: #666;
     }

     .modal-actions {
         display: flex;
         gap: 10px;
     }

     .modal-btn {
         padding: 8px 16px;
         border-radius: 6px;
         border: none;
         font-size: 14px;
         cursor: pointer;
     }

     .modal-btn.cancel {
         background-color: #f5f5f5;
         color: #666;
     }

     .modal-btn.submit {
         background-color: #42b983;
         color: white;
     }

     .modal-btn.submit:disabled {
         background-color: #ccc;
         cursor: not-allowed;
     }
    </style>